<template>
  <view class="favorite-page">
    <nav-header title="我的收藏"></nav-header>
    
    <view class="content" :style="{ paddingTop: statusBarHeight + 44 + 'px' }">
      <!-- Favorites List -->
      <view class="favorites-list" v-if="favorites.length > 0">
        <view 
          class="template-item" 
          v-for="(template, index) in favorites" 
          :key="index"
          @click="viewTemplate(template.id)"
        >
          <view class="template-preview">
            <image class="preview-image" :src="template.thumbnail" mode="aspectFill"></image>
          </view>
          <view class="template-info">
            <text class="template-name">{{ template.name }}</text>
            <view class="template-meta">
              <text class="template-type">{{ template.type }}</text>
              <text class="template-usage">{{ template.usageCount }}人使用</text>
            </view>
          </view>
          <view class="remove-favorite" @click.stop="unfavorite(template.id)">
            <text class="remove-icon">×</text>
          </view>
        </view>
      </view>
      
      <!-- Empty State -->
      <view class="empty-state" v-else>
        <image class="empty-icon" src="/static/images/empty-favorite.png" mode="aspectFit"></image>
        <text class="empty-text">暂无收藏内容</text>
        <text class="empty-desc">收藏的模板将会显示在这里</text>
        <view class="browse-btn" @click="navigateToTemplates">
          <text>去浏览模板</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useUserStore } from '@/store/user.js'
import NavHeader from '@/components/nav-header.vue'

const userStore = useUserStore()
const statusBarHeight = ref(20)
const favorites = ref([])

onMounted(() => {
  // 获取状态栏高度
  const systemInfo = uni.getSystemInfoSync()
  statusBarHeight.value = systemInfo.statusBarHeight
  
  // 加载收藏列表
  loadFavorites()
})

// 加载收藏列表
const loadFavorites = () => {
  // 从Store获取收藏列表
  favorites.value = userStore.getFavorites() || []
  
  // 如果为空，添加示例数据（仅用于演示）
  if (favorites.value.length === 0 && process.env.NODE_ENV === 'development') {
    favorites.value = [
      {
        id: '1',
        name: '简约风格简历模板',
        type: '通用',
        thumbnail: '/static/images/template-thumb-1.png',
        usageCount: 2145,
        addedAt: new Date().toISOString()
      },
      {
        id: '2',
        name: '创意设计师简历模板',
        type: '创意',
        thumbnail: '/static/images/template-thumb-2.png',
        usageCount: 1820,
        addedAt: new Date().toISOString()
      }
    ]
  }
}

// 查看模板详情
const viewTemplate = (id) => {
  uni.navigateTo({
    url: `/pages/template/detail?id=${id}`
  })
}

// 取消收藏
const unfavorite = (id) => {
  uni.showModal({
    title: '取消收藏',
    content: '确定要取消收藏该模板吗？',
    success: (res) => {
      if (res.confirm) {
        // 从列表中移除
        favorites.value = favorites.value.filter(item => item.id !== id)
        
        // 从Store中移除
        userStore.removeFavorite(id)
        
        // 提示成功
        uni.showToast({
          title: '已取消收藏',
          icon: 'success'
        })
      }
    }
  })
}

// 跳转到模板列表
const navigateToTemplates = () => {
  uni.switchTab({
    url: '/pages/template/list'
  })
}
</script>

<style lang="scss" scoped>
.favorite-page {
  min-height: 100vh;
  background-color: #F8F8F8;
  
  .content {
    padding: 16px;
  }
  
  .favorites-list {
    .template-item {
      background-color: #FFFFFF;
      border-radius: 12px;
      margin-bottom: 16px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
      overflow: hidden;
      position: relative;
      
      .template-preview {
        height: 140px;
        overflow: hidden;
        
        .preview-image {
          width: 100%;
          height: 100%;
        }
      }
      
      .template-info {
        padding: 12px;
        
        .template-name {
          font-size: 16px;
          font-weight: 500;
          color: #333;
          margin-bottom: 8px;
          display: block;
        }
        
        .template-meta {
          display: flex;
          align-items: center;
          justify-content: space-between;
          
          .template-type {
            font-size: 13px;
            color: #5ac725;
            background-color: #f0f9eb;
            padding: 2px 8px;
            border-radius: 10px;
          }
          
          .template-usage {
            font-size: 13px;
            color: #999;
          }
        }
      }
      
      .remove-favorite {
        position: absolute;
        top: 8px;
        right: 8px;
        width: 26px;
        height: 26px;
        background-color: rgba(0, 0, 0, 0.5);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        
        .remove-icon {
          color: #FFFFFF;
          font-size: 18px;
          font-weight: bold;
        }
      }
    }
  }
  
  .empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 0;
    
    .empty-icon {
      width: 140px;
      height: 140px;
      margin-bottom: 16px;
    }
    
    .empty-text {
      font-size: 18px;
      font-weight: 500;
      color: #333;
      margin-bottom: 8px;
    }
    
    .empty-desc {
      font-size: 14px;
      color: #999;
      margin-bottom: 20px;
    }
    
    .browse-btn {
      padding: 10px 20px;
      background-color: #5ac725;
      border-radius: 20px;
      
      text {
        color: #FFFFFF;
        font-size: 15px;
      }
    }
  }
}
</style> 